<template>
  <div class="btnDetail">
    <el-dialog class="dialog800" :close-on-click-modal="false" :append-to-body="true" :title="dialogTitle" :visible.sync="dialogFormVisibleAdd" @opened="$store.commit('dialogTop')" @close="resetForm()">
      <div style="margin: 5px 0;">
        <div class="map-table el-table el-table--border">
          <table class="el-table__body" style="border-spacing: 0; width: 100%;">
            <colgroup>
              <col width="50%">
              <col width="50%">
            </colgroup>
            <tbody>
              <tr class="el-table__row">
                <td><div class="cell">区域名称：{{info.areaName}}</div></td>
                <td><div class="cell">区域类型：{{typeList[parseInt(info.areaType)]}}</div></td>
              </tr>
              <tr class="el-table__row">
                <td><div class="cell">可停放数量：{{info.parkValue}}</div></td>
                <td><div class="cell">预警阈值：{{info.alarmValue}}</div></td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="map-table el-table el-table--border" style="margin-bottom: 20px; margin-top: -1px;">
          <table class="el-table__body" style="border-spacing: 0; width: 100%;">
            <tbody>
              <tr class="el-table__row">
                <td><div class="cell">企业名称</div></td>
                <td><div class="cell">监控区停放数</div></td> 
                <td v-if="info.areaType==2"><div class="cell">20米内停放数</div></td>
                <td v-if="info.areaType==2"><div class="cell">50米内停放数</div></td>
                <td v-if="info.areaType==2"><div class="cell">100米内停放数</div></td>
              </tr>
              <tr class="el-table__row" v-for="item in info.park">
                <td><div class="cell">{{item.enterpriseName}}</div></td>
                <td><div class="cell">{{item.parkCount}}</div></td>
                <td v-if="info.areaType==2"><div class="cell">{{item.twentyParkCount}}</div></td>
                <td v-if="info.areaType==2"><div class="cell">{{item.fiftyParkCount}}</div></td>
                <td v-if="info.areaType==2"><div class="cell">{{item.hundredParkCount}}</div></td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="map-chart">
          <div class="colorWrap" v-if="info.areaType==2">
            <div class="checkWrap" style="text-align: left;">
              <el-radio-group v-model="dataType" size="mini" @change="changeDataType()">
                <div v-for="(item,index) in dataTypeList" :key="index" style="line-height: 35px;text-align: left;">
                  <span class="companyList">
                    <el-radio-button :label="index">{{item}}</el-radio-button>
                  </span>
                </div>
              </el-radio-group>
            </div>
          </div>
          <mapEcharts :chartInfo="info.chart" :areaType="info.areaType" :dataType="dataType" ref="mapecharts"></mapEcharts>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import mapEcharts from "./mapEcharts.vue"
  export default {
    props:[],
    data () {
      return {
        info: {
	  areaType:0,
          park:{
            packCount:{}
          }
        },
        typeList: ['区域', '禁停区', '规范停放区', '动态调节区', '临时监控区', '违投车辆分布'],
        id: 0,
        dataType: 0,
        dataTypeList: ['设施停放', '20米', '50米', '100米'],
        dialogFormVisibleAdd: false,
      }
    },
    components:{mapEcharts},
    created(){

    },
    methods: {
      //提交回调
      dialogOpen(id, dataType){
        this.axios.post(process.env.API_HOST + '/vehicle/selectMonitorPark', {id:id, dataType:dataType || 0})
          .then(response => {
            let result=response.data
            if (result.code == 200) {
              this.info=result.result
	      this.dialogTitle=this.typeList[parseInt(result.result.areaType)]
              this.id=id           
              this.dataType=dataType || 0
              this.dialogFormVisibleAdd = true
              setTimeout(()=>{
                this.$refs.mapecharts.initData()
              })
            }
          })
          .catch(error => {
            console.log(error);
          });
      },
      changeDataType(e){
        this.dialogOpen(this.id, this.dataType)
      },

      resetForm(formName) {
        this.info={}
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" >
  @import "../../../../common/stylus/mixin.styl"
  .btnDetail
    display inline-block
  .dialog800 .el-dialog
    width 1000px !important
    font-family 'SourceHanSansCN-Medium'
    text-align left
  .map-table::before
    height 0
  .map-chart
    position relative
    .checkWrap
      position absolute
      right 10px
      top 10px
      line-height 25px
      vertical-align middle
      padding 10px
      border-radius 5px
      z-index 5
      color #000
      background-color rgba(255,255,255,0.8)
    .el-radio-button__inner
      min-width 80px
    
</style>